<template>
  <div id="home">
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control class="tab-control"
      :titles="['流行','新款','精选']"
      @tabClick="tabClick"
      ref="tabControl1"
      v-show="isTabFixed"
    />
    <scroll
      class="content"
      ref="scroll"
      :probe-type="3"
      @scroll="contentScroll"
      :pull-up-load="true"
      @pullingUp="loadMore"
    >
      <home-swiper :banners='banners' @swiperImageLoad='swiperImageLoad' class="swipper"/>
      <recommend-view :recommends="recommends"/>
      <feature-view/>
      <tab-control class="tab-control"
        :titles="['流行','新款','精选']"
        @tabClick="tabClick"
        ref="tabControl2"
      />
      <goods-list :goods="showGoods" />
    </scroll>
    <back-top @click.native="backTopClick" v-show="isShowBackTop"/>
  </div>
</template>
<script>
  import HomeSwiper from './childComps/HomeSwiper'
  import RecommendView from './childComps/RecommendView'
  import FeatureView from './childComps/FeatureView'
  import GoodsList from './childComps/GoodsList'

  import NavBar from 'components/common/navBar/NavBar'
  import Scroll from 'components/common/scroll/Scroll'
  import TabControl from 'components/content/tabControl/TabControl'

  import { getHomeMultidata, getHomeGoods } from 'network/home'
  import {itemListenerMixin, backTopMixin} from 'common/mixin'

  export default {
    name: "Home",
    components: {
      HomeSwiper,
      RecommendView,
      FeatureView,

      NavBar,
      Scroll,
      TabControl,
      GoodsList
    },
    mixins: [itemListenerMixin, backTopMixin],//混入
    data(){
      return{
        banners: [],
        recommends: [],
        goods: {
          'pop': { page: 0, list: [] },
          'new': { page: 0, list: [] },
          'sell': { page: 0, list: [] }
        },
        currentType: 'pop',
        // isShowBackTop: false,
        tabControlOffSetTop: 0,
        isTabFixed: false,
        saveY: 0
      }
    },
    created(){
      //1.请求多个数据
      this.getHomeMultidata()

      //2.请求商品数据
      this.getHomeGoods('pop')
      this.getHomeGoods('new')
      this.getHomeGoods('sell')
    },
    mounted(){
      //3.监听item中图片加载完成
      //防抖操作
      // const refresh = debounce(this.$refs.scroll.refresh)
      // this.$bus.$on('itemImageLoad', () => {
      //   refresh()
      // })

      //获取tabControl的offsetTop
      // this.tabControlOffSetTop = this.$refs.tabControl.$el.offsetTop
    },
    computed: {
      showGoods(){
        return this.goods[this.currentType].list
      }
    },
    activated(){
      this.$refs.scroll.scrollTop(0, this.saveY, 0)
      this.$refs.scroll.refresh()
    },
    deactivated(){
      //1.保存Y值
      this.saveY = this.$refs.scroll.getScrollY()
      console.log(this.saveY)
      //2.取消全局监听事件
      this.$bus.$off('itemImgLoad', this.itemImageListener)
    },
    methods: {
      /**
       * 事件监听相关方法
      */
     //防抖动方法
    //  debounce(func, delay){
    //    let timer = null
    //    return function(...args){
    //      if(timer) clearTimeout(timer)
    //      timer = setTimeout(() => {
    //        func.apply(this, args)
    //      }, delay);
    //    }
    //  },

      tabClick(index){
        switch(index){
          case 0:
            this.currentType = 'pop'
            break
          case 1:
            this.currentType = 'new'
            break
          case 2:
            this.currentType = 'sell'
            break
        }
        this.$refs.tabControl1.currentIndex = index
        this.$refs.tabControl2.currentIndex = index
      },
      // backTopClick(){
      //   this.$refs.scroll.scrollTop(0, 0)
      // },
      contentScroll(position){
        //1.判断 backTop 是否显示
        // this.isShowBackTop = (-position.y) > 1000
        this.listenShowBackTop(position)

        //2.判断tabControl是否吸顶(position: fixed)
        this.isTabFixed = (-position.y) > this.tabControlOffSetTop
      },

      /**
       * 网络请求相关事件
      */
      //上拉加载更多
      loadMore(){
        this.getHomeGoods(this.currentType)
      },

      //获取tabControl的offsetTop
      swiperImageLoad(){
        this.tabControlOffSetTop = this.$refs.tabControl2.$el.offsetTop
        console.log(this.tabControlOffSetTop)
        this.newRefresh()
      },
      getHomeMultidata(){
        getHomeMultidata().then( res => {
          this.banners = res.data.banner.list
          this.recommends = res.data.recommend.list
        })
      },

      getHomeGoods(type){
        const page = this.goods[type].page + 1
        getHomeGoods(type, page).then(res => {
          this.goods[type].list.push(...res.data.list)
          this.goods[type].page += 1

          //完成上拉加载更多
          this.$refs.scroll.finishPullUp()
        })
      }
    }
  }
</script>

<style scoped>
#home{
  /* padding-top: 44px; */
  height: 100vh;
}
.home-nav{
  background-color: var(--color-tint);
  color: #fff;

  /*在使用浏览器原生滚动时, 为了让导航不跟随一起滚动*/
    /* position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9; */
}
.tab-control{
  position: relative;
  z-index: 9;
}
.content{
  overflow: hidden;

  position: absolute;
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
}
/*.content {*/
  /*height: calc(100% - 93px);*/
  /*overflow: hidden;*/
  /*margin-top: 44px;*/
/*}*/
</style>
